<template>
  <div class="exhibits-box">
    <div class="heard-title">
      <titles title="展品图库" />
      <mysearchsPut @seachInfo="seachInfo" v-if="seachShow" />
    </div>
    <div class="exbits-list" v-if="total > 1">
      <t-row :gutter="20">
        <t-col style="margin-bottom: 32px" :span="3" v-for="item in list" :key="item.id">
          <div class="exhibits-item" @click="pathInfo(item.id, item.moduleId)">
            <t-image
              fit="cover"
              position="center"
              class="exhibits-item-img t-image--fit-contain t-image--position-center"
              :src="$filters.getLinkUrl(item.coverUrl, '?imageView2/1/h/186/format/webp')"
              alt=""
            >
              <template #error>
                <imageNull />
              </template>
            </t-image>
            <div
              class="item-title"
              :style="{
                background: colorList5[store.styleInfo.colorType - 1].themeColor,
              }"
            >
              <span>{{ item.name }}</span>
            </div>
          </div>
        </t-col>
      </t-row>
      <t-row style="margin-top: 48px">
        <t-col :span="8" :offset="2" v-if="total > 20">
          <paginationPage @change="change" :current="parmas.pageNo" :pageSize="parmas.pageSize" :total="total" />
        </t-col>
      </t-row>
    </div>
    <div v-else style="line-height: 200px" class="null-item">暂无相关数据</div>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import imageNull from '@/components/imageNull/index.vue';
import titles from '../components/title.vue';
import paginationPage from '../components/paginationPage.vue';
import { pagerCount } from '@/utils/minxin';
import { pathList, pathListLoop } from '../index.ts';
import { colorList5 } from '../../data';
import { exhibitionData } from '@/api/templates/templates';
import mysearchsPut from './mySPut.vue';
import { useRouter, useRoute } from 'vue-router';
import { ref, reactive, watch, onDeactivated, onActivated, nextTick } from 'vue';
import { MessagePlugin } from 'tdesign-vue-next';
import { useProjectStore } from '@/store';

const store = useProjectStore();
const router = useRouter();
const route = useRoute();
const heartbeat = ref(0); //页面心跳值
const windowTops = ref(0);
const total = ref(1);
const pageMax = ref(1);
const list = ref([]);
const seachShow = ref(true);
const parmas = reactive({
  value: '',
  typeId: 0,
  ageId: 0,
  levelId: 0,
  ModuleId: 1,
  CompanyId: -1,
  pageNo: 1,
  pageSize: 20,
});

const isShow = ref(false);

const init = async () => {
  try {
    let arr = parmas;
    arr.ageId = arr.ageId === 0 ? arr.ageId : arr.ageId[arr.ageId.length - 1];
    let { data } = await exhibitionData(localStorage.getItem('projectId'), parmas);
    total.value = data.total !== 0 ? data.total : 1;
    list.value = data.data;
    pageMax.value = pagerCount(total.value, parmas.pageSize);
    console.log(pageMax.value);
  } catch {}
};
const addParmasNo = (e: number) => {
  parmas.pageNo = e;
  init();
};
const SeachList = () => {
  isShow.value = !isShow.value;
  if (!isShow.value) {
    parmas.value = '';
    parmas.typeId = 0;
    parmas.ageId = 0;
    parmas.levelId = 0;
    parmas.ModuleId = 1;
    parmas.CompanyId = -1;
    parmas.pageNo = 1;
    init();
  }
};
const change = (e: any) => {
  // console.log(e);
  parmas.pageNo = e.page;
  init();

  var dom = document.getElementById('timeAxis-child-box-id');
  dom.scrollIntoView({ behavior: 'smooth' });
};
// const onPageSizeChange = (size) => {
//
// };

// const onCurrentChange = (index, pageInfo) => {
//   init();
// };
const pathInfo = (e?: number, moduleId: number) => {
  router.push({
    name: route.meta.loopType ? pathListLoop[7] : pathList[7],
    query: { showpieceid: e, moduleId: moduleId },
  });
  // setTimeout(() => {
  //   const ele = document.getElementById('timeAxis-child-box-id'); // 获取元素
  //   const top = ele.offsetTop - 140; // 获取元素距离文档顶部的距离
  //   window.scrollTo({
  //     top: top,
  //     behavior: 'smooth', // 设置滚动的动画效果
  //   });
  // }, 100);
};
const seachInfo = (e: any) => {
  parmas.value = e.value;
  parmas.typeId = e.typeId;
  parmas.ageId = e.ageId;
  parmas.levelId = e.levelId;
  parmas.ModuleId = e.ModuleId;
  parmas.CompanyId = e.CompanyId;
  parmas.pageNo = 1;
  init();
};
const onChange = (pageInfo) => {
  console.log(pageInfo);
};
// init();
const lock = ref(true);
onActivated(() => {
  lock.value = true;
  window.addEventListener('scroll', function () {
    if (!lock.value) {
      return;
    }
    var scrollTop = window.pageYOffset || document.documentElement.scrollTop;

    windowTops.value = scrollTop;
  });
  nextTick(() => {
    if (heartbeat.value !== store.heartbeatCurrent) {
      windowTops.value = 0;
      parmas.value = '';
      parmas.typeId = 0;
      parmas.ageId = 0;
      parmas.levelId = 0;
      parmas.ModuleId = 1;
      parmas.CompanyId = -1;
      parmas.pageNo = 1;
      seachShow.value = false;
      // console.log(heartbeat.value, store.heartbeatCurrent, 'active');
      setTimeout(() => {
        seachShow.value = true;
      }, 0);
    } else {
      if (windowTops.value > 300) {
        nextTick(() => {
          setTimeout(() => {
            window.scrollTo({
              top: windowTops.value,
              // behavior: 'smooth', // 使用平滑滚动效果
            });
          }, 150);
        });
      }
    }
    heartbeat.value = store.heartbeatCurrent;
    init();
  });
  // if(heartbeat.value===)
});
onDeactivated(() => {
  lock.value = false;
  window.removeEventListener('scroll', function () {
    var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    // console.log('滚动距离：' + scrollTop + 'px');
    windowTops.value = scrollTop;
  });
});
</script>

<style lang="less" scoped>
@import '../index.less';
.null-item {
  color: #fff;
  opacity: 0.2;
}
.exhibits-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 1180px;
  min-width: 1180px;
  margin: 0 auto;
}
.heard-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.exhibits-item {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  width: 100%;
  .exhibits-item-img {
    width: 100%;
    // height: 186px;
  }
}
.item-title {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  padding: 0 16px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 18px;
    color: #fff;
    line-height: 28px;
  }
}
.exbits-list {
  width: 100%;
  margin-top: 100px;
  margin-bottom: 100px;
}
:deep(.t-image__wrapper) {
  height: 0px;
  padding-bottom: 75%;
  overflow: hidden;
  border-radius: 0px;
}

:deep(.t-image__wrapper img) {
  position: absolute;
  inset: 0px;
  box-sizing: border-box;
  padding: 0px;
  border: none;
  margin: auto;
  display: block;
  width: 0px;
  height: 0px;
  min-width: 100%;
  max-width: 100%;
  min-height: 100%;
  max-height: 100%;
}
</style>
